@layout("/common/_container.html"){
<div class="layui-card">
<div class="layui-form layui-card-header layuiadmin-card-header-auto">
  <div class="layui-form-item">
    <div class="layui-inline">
      	<label class="layui-form-label">菜单名称</label>
		<div class="layui-input-block">
		  <input type="text" id="menuName" placeholder="菜单名称" autocomplete="off" class="layui-input">
		</div>
    </div>
    <div class="layui-inline">
      	<label class="layui-form-label">层级</label>
		<div class="layui-input-block">
		  <input type="text" id="level" placeholder="层级" autocomplete="off" class="layui-input">
		</div>
    </div>
    <div class="layui-inline">
      <button class="layui-btn layuiadmin-btn-useradmin" data-type="reload">
        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
      </button>
    </div>
  </div>
</div>
<div class="layui-card-body">
	@if(shiro.hasPermission("/menu/add")){
	<div style="padding-bottom: 10px;">
      <button class="layui-btn layuiadmin-btn-useradmin" data-type="add"><i class="layui-icon layui-icon-add-1"></i>添加</button>
    </div>
    @}
	<table class="layui-hidden" id="treeTable" lay-filter="treeTable"></table>
	<script type="text/html" id="oper">
		@if(shiro.hasPermission("/menu/update")){
  		<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="update" title="编辑"><i class="layui-icon layui-icon-edit"></i></a>
		@}    
		@if(shiro.hasPermission("/menu/delete")){    
		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" title="删除"><i class="layui-icon layui-icon-delete"></i></a>
		@}
	</script>
</div>
</div>
<script>
layui.config({
	base: '${ctxPath}/static/layuiadmin/' //静态资源所在路径
}).extend({
	index: 'lib/index' //主入口模块
}).use(['index', 'layer','table', 'form', 'treeGrid'],function(){
	var $ = layui.$
  	,form = layui.form
  	,treeGrid = layui.treeGrid;
	var loadingIndex = layer.msg('数据加载中', {icon: 16, time: 0 });
	treeGrid.render({
	    elem: '#treeTable'
	    ,url: Feng.ctxPath +'/menu/list'
	    ,cellMinWidth: 100
	    ,height: 'full-168' //设置高度
	    ,treeId:'code'//树形id字段名称
	    ,treeUpId:'pcode'//树形父id字段名称
	    ,treeShowName:'name'//以树形式显示的字段
	    ,cols: [[
	        {title: '菜单名称', field: 'name',width:230},
	        {title: '菜单编号', field: 'code',width:150},
	        {title: '菜单父编号', field: 'pcode',width:150},
	        {title: '请求地址', field: 'url',width:200},
	        {title: '排序', field: 'num',width:100},
	        {title: '层级', field: 'levels',width:100},
	        {title: '是否是菜单', field: 'isMenuName'},
	        {title: '状态', field: 'statusName'},
	        {title: '操作',fixed: 'right', width:120, align:'center',fixed: 'right', toolbar: '#oper'}
	    ]]
	    ,page:false
	    ,text: '对不起，加载出现异常！'
	    ,done: function(res){
	    	layer.close(loadingIndex);
        }
	});
	
	//事件
	var active = {
		//加载
	   	reload: function(){
	       var menuName = $('#menuName').val();
	       var level = $('#level').val();
	       var loadingIndex = layer.msg('数据加载中', {icon: 16, time: 0 });
	       //执行表格重载
	       treeGrid.reload('treeTable', {
	    	 height: 'full-168' //设置高度
	    	 ,where: {
	        	 menuName: menuName
	        	,level: level
	         }
	       ,done: function(res){
		    	layer.close(loadingIndex);
	        }
	      });
	    },
     	add: function(){
     	 var loadingIndex = layer.msg('数据加载中', {icon: 16, time: 0 });
         layer.open({
           type: 2
           ,title: '添加用户'
           ,content: Feng.ctxPath +'/menu/menu_add'
           ,maxmin: true
           ,area: ['703px', '388px']
           ,btn: ['确定', '取消']
           ,yes: function(index, layero){
             var iframeWindow = window['layui-layer-iframe'+ index]
             ,submitID = 'menu-submit'
             ,submit = layero.find('iframe').contents().find('#'+ submitID);
             //监听提交
             iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
               var field = data.field; //获取提交的字段
                 var loading2 = layer.load(2);
               var ajax = new $ax(Feng.ctxPath + "/menu/add", function (data) {
                   Feng.success("添加成功!");
                   treeGrid.reload('treeTable',{
                	  done: function(res){
           		    	layer.close(loadingIndex);
           	          }
                   }); //数据刷新
                   layer.close(loading2); //关闭弹层
                   layer.close(index); //关闭弹层
               }, function (data) {
                   Feng.error("添加失败!" + data.responseJSON.message + "!");
               },true);
               ajax.setData(field);
               ajax.start();
             });  
             submit.trigger('click');
           }
           ,btn2: function(index, layero){
      	   		layer.close(loadingIndex);
           }
           ,cancel:function(index, layero){
      	   	layer.close(loadingIndex);
           }
         }); 
       }
   };
  
   
   $('.layui-btn.layuiadmin-btn-useradmin').on('click', function(){
     var type = $(this).data('type');
     active[type] ? active[type].call(this) : '';
   });
	
	//监听工具条
	  /* treeGrid.on('tool(menu)', function(obj){
	    var data = obj.data;
	    if(obj.event === 'del'){
	    	layer.msg('ID：'+ data.id + ' 的查看操作');
	       layer.confirm('真的删除行么', function(index){
	        obj.del();
	        layer.close(index);
	      }); 
	    } else if(obj.event === 'edit'){
	      layer.alert('编辑行：<br>'+ JSON.stringify(data))
	    }
	  }); */
 //监听工具条
   treeGrid.on('tool(treeTable)', function(obj){
     var data = obj.data;
     if(obj.event === 'del'){
    	 layer.confirm('确定删除此菜单吗？', function(index){
             var loadingIndex = layer.msg('数据加载中', {icon: 16, time: 0 ,shade: 0.01});
    		 var ajax = new $ax(Feng.ctxPath + "/menu/remove", function (data) {
                 Feng.success("删除成功!");
                 treeGrid.reload('treeTable',{
               	  done: function(res){
          		    	layer.close(loadingIndex);
          	          }
                  }); //数据刷新
                 layer.close(index); //关闭弹层
             }, function (data) {
                 Feng.error("删除失败!" + data.responseJSON.message + "!");
             },true);
             ajax.set("menuId", data.id);
             ajax.start();
         });
     }else if(obj.event === 'update'){
       var loadingIndex = layer.msg('数据加载中', {icon: 16, time: 0 });
       layer.open({
         type: 2
         ,title: '编辑用户'
         ,content: Feng.ctxPath +'/menu/menu_update/'+data.id
         ,area: ['703px', '388px']
         ,btn: ['确定', '取消']
         ,yes: function(index, layero){
           var iframeWindow = window['layui-layer-iframe'+ index]
           ,submitID = 'menu-submit'
           ,submit = layero.find('iframe').contents().find('#'+ submitID);

           //监听提交
           iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
             var field = data.field; //获取提交的字段
               var loading2 = layer.load(2);
             var ajax = new $ax(Feng.ctxPath + "/menu/update", function (data) {
                 Feng.success("修改成功!");
                 treeGrid.reload('treeTable',{
               	  done: function(res){
          		    	layer.close(loadingIndex);
          	          }
                  }); //数据刷新
                 layer.close(loading2); //关闭弹层
                 layer.close(index); //关闭弹层
             }, function (data) {
                 Feng.error("修改失败!" + data.responseJSON.message + "!");
             },true);
             ajax.setData(field);
             ajax.start();
             
           });  
           
           submit.trigger('click');
         }
         ,btn2: function(index, layero){
    	   layer.close(loadingIndex);
         }
         ,cancel:function(index, layero){
    	   layer.close(loadingIndex);
         }
       })
     }
   });
});

</script>
@}
